<template>
  <div>
    <!-- 全国老年人慢性病分布 -->
    <el-card class="mb-4">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-bold text-lg">全国老年人慢性病分布</span>
          <el-select v-model="chronicType" size="small" @change="updateChart">
            <el-option label="全部" value="all"></el-option>
            <el-option label="心血管疾病" value="cardiovascular"></el-option>
            <el-option label="糖尿病" value="diabetes"></el-option>
            <el-option label="高血压" value="hypertension"></el-option>
          </el-select>
        </div>
      </template>
      <div ref="chartRef1" style="height: 350px;"></div>
    </el-card>

    <!-- 各年龄段健康指数对比 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="mb-4">
          <template #header>
            <div>
              <span class="font-bold text-lg">各年龄段健康指数对比</span>
            </div>
          </template>
          <div ref="chartRef2" style="height: 350px;"></div>
        </el-card>
      </el-col>
      <!-- 医疗资源使用情况 -->
      <el-col :span="12">
        <el-card class="mb-4">
          <template #header>
            <div>
              <span class="font-bold text-lg">医疗资源使用情况</span>
            </div>
          </template>
          <div ref="chartRef3" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import * as echarts from "echarts";

// 静态死数据
const CHRONIC_DATA = [
  { name: "心血管疾病", prevalence: 20, type: "cardiovascular" },
  { name: "糖尿病", prevalence: 15, type: "diabetes" },
  { name: "高血压", prevalence: 30, type: "hypertension" }
];

const AGE_HEALTH_DATA = [
  { ageRange: "0-20", physicalIndex: 90, mentalIndex: 95, socialIndex: 98 },
  { ageRange: "21-40", physicalIndex: 88, mentalIndex: 90, socialIndex: 92 },
  { ageRange: "41-60", physicalIndex: 85, mentalIndex: 85, socialIndex: 88 },
  { ageRange: "61-80", physicalIndex: 80, mentalIndex: 75, socialIndex: 80 },
  { ageRange: "81+", physicalIndex: 70, mentalIndex: 60, socialIndex: 65 }
];

const MEDICAL_RESOURCE_DATA = [
  { province: "北京", usage: 100 },
  { province: "上海", usage: 120 },
  { province: "广东", usage: 150 },
  { province: "江苏", usage: 130 },
  { province: "浙江", usage: 110 }
];

// 组件状态
const chronicType = ref("all");
const chartRef1 = ref(null);
const chartRef2 = ref(null);
const chartRef3 = ref(null);

// 初始化图表
onMounted(() => {
  initChart1();
  initChart2();
  initChart3();
});

// 慢性病图表
const initChart1 = () => {
  const chart = echarts.init(chartRef1.value);
  updateChart1(chart);
  
  // 监听窗口变化
  window.addEventListener('resize', () => chart.resize());
};

const updateChart1 = (chart) => {
  const filteredData = chronicType.value === "all" 
    ? CHRONIC_DATA 
    : CHRONIC_DATA.filter(item => item.type === chronicType.value);

  chart.setOption({
    title: { text: "全国老年人慢性病患病率", left: "center" },
    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
    xAxis: { data: filteredData.map(item => item.name) },
    yAxis: { name: "患病率 (%)" },
    series: [{
      name: "慢性病",
      type: "bar",
      data: filteredData.map(item => item.prevalence),
      color: "#36a2eb"
    }]
  });
};

// 健康指数图表
const initChart2 = () => {
  const chart = echarts.init(chartRef2.value);
  chart.setOption({
    title: { text: "各年龄段健康指数对比", left: "center" },
    tooltip: { trigger: "axis" },
    xAxis: { data: AGE_HEALTH_DATA.map(item => item.ageRange) },
    yAxis: { min: 0, max: 100 },
    series: [
      { name: "身体指数", type: "line", data: AGE_HEALTH_DATA.map(item => item.physicalIndex), color: "#ff6384" },
      { name: "心理指数", type: "line", data: AGE_HEALTH_DATA.map(item => item.mentalIndex), color: "#36a2eb" },
      { name: "社会参与指数", type: "line", data: AGE_HEALTH_DATA.map(item => item.socialIndex), color: "#4bc0c0" }
    ]
  });
  window.addEventListener('resize', () => chart.resize());
};

// 医疗资源图表
const initChart3 = () => {
  const chart = echarts.init(chartRef3.value);
  chart.setOption({
    title: { text: "各省医疗资源使用情况", left: "center" },
    tooltip: { trigger: "item", formatter: "{b}: {c}次/年" },
    xAxis: { data: MEDICAL_RESOURCE_DATA.map(item => item.province) },
    yAxis: { name: "人均使用次数" },
    series: [{
      name: "医疗资源使用",
      type: "bar",
      data: MEDICAL_RESOURCE_DATA.map(item => item.usage),
      color: "#f36"
    }]
  });
  window.addEventListener('resize', () => chart.resize());
};

// 监听下拉框变化
watch(chronicType, (newVal) => {
  const chart = echarts.getInstanceByDom(chartRef1.value);
  if (chart) updateChart1(chart);
});
</script>

<style scoped>
.flex { display: flex; align-items: center; }
.justify-between { justify-content: space-between; }
.mb-4 { margin-bottom: 16px; }
</style>